
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
      * {
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
        }
      .textWrap{
        cursor: pointer;
      }
      circle{
        cursor: pointer;
      }
      circle:hover{
        cursor: pointer;
        background-color: blue;
      }
      .infoWrap {
          display: block;
          cursor: pointer;
          z-index: 2;
          position: absolute;
          border-radius: 4px;
          box-shadow: 0px 10px 54px rgba(0, 0, 0, 0.7);
          background-color: rgb(255, 255, 255);
          -webkit-transition:-webkit-transform 1s;
             -moz-transition:   -moz-transform 2s;
              -ms-transition:    -ms-transform 2s;
               -o-transition:     -o-transform 2s;
      }

      .infoWrap:hover{
        -webkit-transform:scale(1.1,1.1);
           -moz-transform:rotate(360deg);
            -ms-transform:rotate(360deg);
             -o-transform:rotate(360deg);
                transform:rotate(360deg);
      }

      .infoWrap dl{
        margin: 5px;
      }
      .infoWrap dt{
        width:40px;
      }

      .infoWrap dd{
        margin-left:50px;
      }
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <div class="row-fluid">
        <div id="map_canvas" class="span10 offset1 well">

        </div>
      </div>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="jquery-1.8.3.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="queue.js"></script>
    <script src="drawCVSGraph.js"></script> 
    <script type="text/javascript">
      $(function(){
        $("#map_canvas").drawCVSGraph({
          url:"tree.json"
        });
      });
    </script>
  </body>
</html>
